<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
            <el-breadcrumb-item>校外实践课题</el-breadcrumb-item>
            <el-breadcrumb-item>学生选题情况</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">学生选题情况</h2>

        <!-- 主要内容 -->

        <div style="margin:3% 3% 3% 3%;border: 1px solid #e0e0e0; border-radius: 5px;">
            <!-- 选择班级后刷新下方表格 -->
            <!-- 表格1 -->
            <div style="margin: 3% 5% 3% 5%;height: 30%;">
                <h1>选择班级</h1>
                <div style=" width: 100%; margin: 2% 3% 1% 3%; height: 50%;">
                    <el-table :data="mySchema" height="150" style="width: 100%; margin-top: 10px;">
                        <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" />
                        <el-table-column prop="courseName" label="实践课程" />
                        <el-table-column prop="teachName" label="任课老师" />
                        <el-table-column prop="majorName" label="专业名称" />
                        <el-table-column prop="className" label="班级" />
                        <el-table-column fixed="right" label="详情" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="choiseClass(scope.row.practicalId, scope.row.courseName, scope.row.className)">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>



            <!-- 学生选题情况表格 -->
            <div style="margin: 3% 5% 3% 5%;">

                <h1>选题状况</h1>
                <div v-if="getInfo != ''">

                    <div>
                        <el-text size="small">已选中实践：{{ selectInfo.courseName }}</el-text><br />
                        <el-text size="small">已选中班级：{{ selectInfo.className }}</el-text>
                    </div>

                    <div style=" width: 100%; margin: 2% 3% 1% 3%; height: 50%;">
                        <!-- @selection-change="ea"  -->
                        <el-table height="250" :data="getInfo" style="width: 100%;">
                            <el-table-column prop="stuId" label="学生ID" />
                            <el-table-column prop="stuName" label="姓名" />
                            <el-table-column prop="topicState" label="选提情况" />
                            <el-table-column prop="teamId" label="队伍编号" />
                            <el-table-column prop="typeStr" label="实践类型" />
                            <el-table-column prop="taskName" label="题目名" />
                            <!-- <el-table-column prop="teamId" label="队伍编号" :formatter="formateTeam" />
                            <el-table-column prop="taskName" label="选题" :formatter="formateTask" />
                            <el-table-column prop="startDate" label="开始时间" :formatter="formatDate" />
                            <el-table-column prop="endDate" label="结束时间" :formatter="formatDate" /> -->
                        </el-table>
                    </div>
                </div>


            </div>

            <!-- 提示选择任务 -->
            <div v-if="getInfo.length == 0" style="background-color: #F5F7FA;">
                <h1
                    style="font-size: 32px; font-weight: bold; margin-top: 3%; text-align: center; background-color: #F5F7FA;">
                    请先选择过程任务</h1>
            </div>
        </div>


    </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax';
//   挂载前进行
onBeforeMount(() => {
  //初始显示老师所有的教学大纲
  const asd = requests({ url: "/outer/practicalTaskVos", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    mySchema.value = abc

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

//教师所有教学大纲的存放地
const mySchema = ref([{ 
  practicalId: '',
  classId: "",
  className: "",
  adviserId: '',
  adviserName: "",
  teachId: '',
  teachName: "",
  practicalType: '',
  onloadDate: "",
  courseSchema: '',
  planId: '',
  courseId: '',
  courseName: "",
  startDate: '',
  majorName: "",
  enrolDate: ""

}])

// stuName: '',
//     stuId:'',
//     classId:'',
//     practicalId:'',
//     teamId:'',
//     PID:'',
//     topicType:'',
//     teamState:'',
//     topicState:'',
//     typeStr:'',
//     taskName:'',


// 学生选题状况
const getInfo = ref([
   
 
])

function ea() {
    console.log(123);
}

let selectInfo = ref({
    courseName: '',
    className: '',
})



//将表格中的实践规范为YY-MM-DD
function formatDate(row, column, cellValue, index) {
    if (cellValue != null) {
        let format = 'YYYY-mm-dd'
        let date = new Date(cellValue);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
        }
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format
    } else {
        return null
    }


}

//提示未组队
function formateTeam(row, column, cellValue, index) {
    if (cellValue == 0) {
        const noTeam = '未组队'
        return noTeam
    } else {
        return cellValue
    }
}

//提示未选题
function formateTask(row, column, cellValue, index) {
    if (cellValue == null) {
        const noTask = '未选题'
        return noTask
    } else {
        return cellValue
    }
}

function choiseClass(id, courseName, className) {

    selectInfo.value.className = className;
    selectInfo.value.courseName = courseName;


    const asd = requests({ url: "/students/team/MytopicAoDetail/" + id, method: "get", }).then(res => {
        if (res.code === 20041) {
            getInfo.value = res.rdata
        } else {
            getInfo.value = null
        }
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

}

</script>